.upload {
  &:hover {
    .process.done {
      .percent {
        .icon-success {
          display: none;
        }
        .icon-delete {
          display: block;
        }
      }
    }
  }
  .process {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 12px;
    overflow: hidden;
    color: #7688a5;
    background-color: #192c53;
    border: 1px solid #13264a;
    border-radius: 8px;
    pointer-events: none;

    .textWrapper {
      position: relative;
      z-index: 2;
      display: flex;
      flex: 1;
      flex-wrap: nowrap;
      align-items: center;
      padding-right: 15px;
      color: #fff;
      .text {
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .processInner {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: rgba(41, 186, 145, 0.4);
    }
    .percent {
      position: absolute;
      top: 0;
      right: 10px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      color: #fff;
      .icon-success {
        display: none;
        width: 23px;
        height: 23px;
        background: url('./images/icon-success.png') no-repeat center / 100% 100%;
      }
      .icon-delete {
        position: relative;
        display: none;
        width: 23px;
        height: 23px;
        background: url('./images/shanchu.png') no-repeat center / 100% 100%;
        pointer-events: all;
      }
    }

    &.done {
      color: #fff;
      .percent {
        .icon-success {
          display: block;
        }
      }
    }
    &.error {
      .processInner {
        background: rgba(240, 8, 8, 0.4);
      }
    }
  }
}
